import React, {Component} from 'react'
import {observer} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Tools } from "weaver-mobile";
import { ListViewPage } from 'weaver-mobile-page';
import VirtualOrg from './VirtualOrg';
import NoData from './NoData';
const getLabel = Tools.getLabel;

@withRouter
@observer
export default class BasicList extends Component{
    render(){
        const { store } = this.props;
        const { listViewStore, setCurrentPage, refreshData } = store;
        const { loading, hasMore, data } = listViewStore;
        const listViewPageProps = {
            style:{height: '100%'},
            store: listViewStore,
            onRefresh: refreshData,
            onEndReached: () => setCurrentPage(),
            onRowClick: data => {
                this.props.history.push(`/resourceInfo/${data.id}`)
            },
            renderFooter: () => {
                if (loading) {
                    return (
                    <div style={{ padding: 30, textAlign: 'center' }}>
                        Loading...
                    </div>
                    );
                } else if (!hasMore) {
                    return (
                    <div className='nomore'>
                        <span className='left' />
                        <span className='name'>{getLabel(390064, '没有更多啦')}</span>
                        <span className='right' />
                    </div>
                    );
                }
                return null;
            }
        }

        return (
            <div className='tabPane content'>
                <VirtualOrg store={store} />
                <div className='list list-base'>
                    {
                        data.length > 0 ? <ListViewPage.Normal {...listViewPageProps} /> : <NoData store={store}/>
                    }
                </div>
            </div>
        )
    }
}